<html>
<head>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Expires" content="-1" />
<title>Web Services - Sample 13: Using jQuery with the PyMOL web server</title>

<script src="json2.js"></script> 
<script src="pymol.js"></script>
<script src="jquery.js"></script>

<script type="text/javascript">

// This page assumes that PyMOL is running on 8083

var pymolhost = "http://localhost:8083";

function callback1(result)
{
   document.getElementById('result').innerHTML = "<pre>"+result+"</pre>";
}

$(document).ready(function() {

 $("a[name=load]").click(function() {
   try {
     $.getJSON(pymolhost+"/apply/pymol.cmd.load?filename=$PYMOL_PATH/test/dat/pept.pdb&_callback=?", callback1);
   } catch (e) {
     alert(e);
   }
   return false; // causes the HREF to not load a new page
 });
   
 $("a[name=delete]").click(function() {
    try {
      $.getJSON(pymolhost+"/apply/pymol.cmd.delete?name=pept&_callback=?", callback1);
    } catch (e) {
      alert(e);
    }
    return false; // causes the HREF to not load a new page
 });
   
 $("a[name=get_names]").click(function() {
 try {
   $.getJSON(pymolhost+"/apply/pymol.cmd.get_names?type=objects&_callback=?", callback1);
 } catch (e) {
   alert(e);
 }
   return false; // causes the HREF to not load a new page
 });

 $("a[name=badload]").click(function() {
   try {
     $.getJSON(pymolhost+"/apply/pymol.cmd.load?filename=$PYMOL_PATH/test/dat/pept.pdb");
   } catch (e) {
     if (e.description == undefined) {
       alert(e); //Firefox
     } else {
       alert(e.description); //Explorer
     }
   }
   return false; // causes the HREF to not load a new page
 });

});

</script>
<style text/css>
a.info {
  text-decoration:underline;
  background-color: transparent;
}
a{
  text-decoration:none;
  padding: 1px;
  background-color: #dddddd
}

</style>
</head>
<body>

<h3>Web Services - Sample 13: Using jQuery with the PyMOL web server</h3>

<a href="javascript:void(0)" onclick="window.open('view-source:' + location.href)">view page source</a>

<a href="http://localhost:8083/apply/_quit?href">quit pymol</a>
<p>

<div id="debug">
</div>

PyMOL results will appear here
<div id="result" style="border-style: solid; padding: 10">
</div>
</p>

<p>
A simple 
<A class=info HREF="http://jquery.com/" TARGET=_blank>jQuery</A>
 and JSON function is $.getJSON.  This function accepts a URL and the
name of a JavaScript function to call after the URL result arrives.
<pre>
&lt;A HREF="javascript:$.getJSON('http://localhost:8083/apply/pymol.cmd.load?filename=$PYMOL_PATH/test/dat/pept.pdb&_callback=?', callback1)"&gt;load&lt;/A&gt;
</pre>
causes this
<A HREF="javascript:$.getJSON('http://localhost:8083/apply/pymol.cmd.load?filename=$PYMOL_PATH/test/dat/pept.pdb&_callback=?', callback1)">load</A>
</A>
link to appear.
The callback1 function simply places the result into the black-border box
above.  You can view this callback1 function by
using the "view page source" link above.
</p>
<p>Next, let's
<A HREF="javascript:$.getJSON('http://localhost:8083/apply/pymol.cmd.delete?name=pept&_callback=?', callback1)">delete</A>
</A>
this object and show another common way of using jQuery.
<p>
This html snippet
<pre>
&lt;a href="javascript:void(0)" name=load&gt;load&lt;/a&gt;
</pre>
defines a
<a href="javascript:void(0)" name=load>load</a>
link that is much simpler,
putting the responsibilty on the jQuery $("a[name=load]").click property
to define how to handle this link.
This definition occurs in the jQuery $(document).ready function
<pre>
$(document).ready(function() {

  $("a[name=load]").click(function() {
    try {
      $.getJSON(host+"/apply/pymol.cmd.load?filename=$PYMOL_PATH/test/dat/pept.pdb&_callback=?", callback1);
    } catch (e) {
      alert(e);
    }
    return false; // causes the HREF to not load a new page
  });
});
</pre>
The full source can
be seen by following the "view page source" link above.
</p>
<p>
Other links can be defined in a similar way, for example to
<a href="javascript:void(0)" name=get_names>get object names</a>
or to
<a href="javascript:void(0)" name=delete>delete</a> the object we loaded.
</p>
<p>
Sample16 shows how you can construct complex URL's containing multiple
pymol commands.  These URL strings can be used in the $.getJSON function
shown above.
</p>
<p><b>jQuery and cross-domain scripting</b></p>
<p>
This document came from
<script>document.write(document.URL)</script>
as shown in the URL location bar of this browser.
The jQuery requests are made to the PyMOL server at
<script>document.write(pymolhost)</script>
This is a cross-domain request that violates the same-origin policy.
But jQuery uses a workaround called cross-domain scripting with JSONP
that allows a callback to process any response from the PyMOL server.
In order to illustrate the necessity of a callback in this situation,
click on this link to get an error alert.
<br>
<a href="javascript:void(0)" name=badload>badload</a>
</p>



<!-- the only purpose of this IFRAME is to launch PyMOL via the PWG
  -- helper mechanism -->

	<iframe src="start8083.pwg" name=pwglaunch
	 width="0" height="0" frameborder="0"
 marginheight="0" marginwidth="0"
 scrolling="auto"></iframe>

</body>
</html>
